<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
    #footer_d1{
      height: 150px;
      text-align: center;
      line-height: 30px;
      background-color: rgba(0,0,0,0.8);
      color: #fff;
      font-size: 15px;
    }
  </style>
</head>
<body>
<div id="app">
  <el-header>
    <el-row gutter="60">
      <el-col :span="8">
        <div style="margin-top: 25px;margin-left: 50px;">
          <el-link type="info" href="index.html" style="font-size: 35px;font-weight: bold">
            &nbsp;&nbsp;水果商城</el-link>
        </div>
      </el-col>
      <el-col :span="8">
        <div style="margin-top: 25px">
          <div style="float: left;position: absolute;"><el-input placeholder="想查点什么呢..." style="width: 450px"></el-input></div>
          <div style="position: relative;left: 410px;top: 10px"><i class="el-icon-search" style="font-size: 20px"></i></div>
        </div>
      </el-col>
      <el-col :span="8">
        <el-col :span="12">
          <div style="margin-top: 25px">
            <el-link type="info" href="cart.html" style="font-size: 23px">
              <i class="el-icon-shopping-cart-1"></i>&nbsp;&nbsp;我的购物车</el-link>
          </div>
        </el-col>
        <el-col :span="12">
          <div style="margin-top: 40px">
            <p style="font-size: 15px;text-align: left">
              <i class="el-icon-user-solid"></i>
              欢迎 <a href="javascript:void(0);" @click="logout()">{{user.nick}}退出登录</a>
            </p>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </el-header>
  <el-main>
    <el-menu background-color="#ee4343"
             text-color="#fff"
             default-active="1"
             active-text-color="#409EFF"
             mode="horizontal"
             style="width: auto;">
      <el-menu-item index="1">系统首页</el-menu-item>
      <el-menu-item index="2"><a href="center.html">个人中心</a></el-menu-item>
      <el-menu-item index="3"><a href="comments.html">评论区</a></el-menu-item>
      <el-menu-item index="4">商城中心</el-menu-item>
      <el-menu-item index="5">联系我们</el-menu-item>
      <el-menu-item index="6"><a href="admin.html">后台管理</a></el-menu-item>
    </el-menu>
    <div style="width: 80%;margin: 0 auto;border: 1px solid  rgba(200,200,200,0.5);">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 20px;border-bottom: 1px  solid  rgba(200,200,200,0.5);">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/cart.html' }">购物车</el-breadcrumb-item>
        <el-breadcrumb-item >确认订单</el-breadcrumb-item>
      </el-breadcrumb>
      <el-table
              :data="cartData"
              style="width: 100%">
        <el-table-column width="100">

        </el-table-column>
        <el-table-column
                label="序号"
                type="index"
                width="100" >
        </el-table-column>
        <el-table-column
                label="商品名称"
                width="150">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="商品图片" width="150">
          <template slot-scope="scope">
            <!--scope.row得到当前遍历的对象-->
            <img :src="scope.row.url" style="width: 60px;height: 50px" alt="你点击看看">
          </template>
        </el-table-column>
        <el-table-column label="商品数量" width="200" >
          <template slot-scope="scope">
            {{ scope.row.num }}
          </template>
        </el-table-column>
        <el-table-column label="商品单价" width="150">
          <template slot-scope="scope">&#165; {{ scope.row.price }}</template>
        </el-table-column>
        <el-table-column label="商品总金额" width="150" >
          <template slot-scope="scope">&#165; {{ scope.row.allprice }}</template>
        </el-table-column>
      </el-table>
      <el-form :label-position="labelPosition" label-width="180px">
        <el-form-item label="收货人姓名" >
          <el-input style="width: 350px" v-model="user.nick" disabled></el-input>
        </el-form-item>
        <el-form-item label="收货人电话">
          <el-input style="width: 350px" v-model="user.phone" disabled></el-input>
        </el-form-item>
        <el-form-item label="收货人地址">
          <el-input style="width: 350px" v-model="user.address" disabled></el-input>
        </el-form-item>
      </el-form>
      <div style="margin-top: 20px;float:right;overflow: hidden">
      <span style="margin-right: 100px;color: #909399">
        共&nbsp;&nbsp;&nbsp;{{ cartData.length }}&nbsp;&nbsp;&nbsp;件商品
      &nbsp;&nbsp;&nbsp;<span style="color: red">共计：&#165; {{ totalPrice }} 元</span></span>
        <el-button @click="createOrder">确认订单</el-button>
      </div>
    </div>
  </el-main>
  <el-footer>
    <div id="footer_d1">
      <p>社区版水果商城</p>
      <p>本网页出自文曦玄武组,未经本小组允许不得抄袭</p>
      <p>若有问题联系我们组长：</p>
      <p>1915872962@qq.com</p>
    </div>
  </el-footer>
</div>
</body>
<script src="./js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="./js/eui.js"></script>
<script src="./js/axios.js"></script>
<script src="./js/jquery-1.9.1.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        labelPosition: 'right',
        user: {},
        index: "",sub: "",
        cids: [],
        cartData:[],
        totalPrice: 0.0
      }
    },
    created: function () {
      axios.get("/currentUser").then(function (response) {
        v.user = response.data;
      });
      //加载商品信息
      this.loadCart();
    },
    methods:{
      loadCart(){
        $.ajax({
          url:"/cart/getCartList",
          data: location.search.substr(1),
          type: "GET",
          dataType:"JSON",
          success: function (response) {
            v.cartData = response.data;
            let list = response.data;
            for (let i = 0; i < list.length; i++) {
              v.cids.push(list[i].cid);
              v.totalPrice += list[i].allprice;
            }
            console.log(v.cids);
          }
        })
      },
      //生成订单
      createOrder(){
        $.ajax({
          url:"/order/create",
          data: location.search.substr(1),
          type: "Get",
          dataType:"JSON",
          success: function (response) {
            if(response.state==2000){
              //location.href="login.html"
              v.$alert('订单生成成功，即将前往支付界面！', '温馨提示', {
                confirmButtonText: '确定',
                callback: action => {
                  location.href="index.html"
                }
              });
            }else {
              v.$message.error("创建订单失败！");
            }
          }
        })
      },
      logout() {
        axios.get("/loginOut").then(function (response) {
          if(response.data===1){
            location.href="login.html"
          }else {
            v.$message.error("退出失败！");
          }
        })
      },
    }
  })
</script>
</html>